<template>
  <el-pagination
    class="flex m-t-10 align-items-center"
    :class="isMini ? '' : 'content-center'"
    layout="prev, pager, next"
    hide-on-single-page
    :background="!isMini"
    :small="isMini"
    :current-page="currentPage"
    :page-count="pageCount"
    @current-change="selectedPage"/>
</template>

<script>
export default {
  name: 'Pagination', // 分页
  props: {
    isMini: { // 楼中楼启用这一项，不然用这个组件的默认设置
      type: Boolean,
      default: false,
    },
    currentPage: { // 当前页
      type: Number,
      default: 1,
    },
    pageCount: { // 总页数
      type: Number,
      default: 1,
    },
    noRouter: Boolean,
    clearQuery: Boolean,
    fixedQuery: Object, // 翻页时固定添加的参数
    queryKey: String,
  },
  methods: {
    // 页面跳转！
    selectedPage(page) {
      const action = this.clearQuery ? 'reloadQuery' : 'addQuery';
      const queryKey = this.queryKey || (this.isMini ? 'sub_page' : 'page');
      if (this.noRouter) this.$emit('update:page', page);
      else {
        const query = Object.assign({}, this.fixedQuery, { [queryKey]: page });
        if (queryKey !== 'self_comment_page') {
          Object.assign(query, { self_comment_page: this.$route.query.self_comment_page });
        }
        this[action](Object.assign(query));
      }
    },
  },
};
</script>

<style></style>
